<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 minimum-scale=1.0/">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/top_nav.css">
<link rel="stylesheet" href="./css/car_bottom.css">
    <title>我的考拉豆</title>
    <style>
      
      #top1{
   
   width: 1000px;
   height: 70px;

}
#top1>span{
   float:right;
   transform: translateY(-20px);
}
#klb{
  float: left;
  margin-left: 60px;
}
#head{
   border:1px;
   background-color:rgba(248,248,248);
   width: 1000px;
   height: 250px;
   font-size: 5px;

}
a{
 text-decoration: none;
 color: black;
}
#I1{
   transform: translateY(20px);
}
#I2{
   transform: translateY(-135px);
}
#b1{
   background-color: red;
   align-content: center;
   border: none;
   width: 100px;
   height: 30px;
   transform: translateY(20px);
   margin-left: 40px;
   margin-top: 20px;
}
#mid{
   border-bottom: 1px solid black;
   margin-bottom: 30px;
   width: 1200px;
   
}
#mon{
 width: 1200px;
}
#b2{
   font-size: x-large;
   border: none;
   background-color: white;
   margin-left: 20px;
   margin-top: 30px;
   margin-bottom: 20px;
   font-weight: 700;
}
#b3{
   font-size: x-large;
   border: none;
   background-color: white;
   margin-left: 20px;
   margin-top: 30px;
}
#t1{
   margin-top: 50px;
   margin-left: 40px;
}
#foot{
 width: 100%;
 height: 500px;
}
#quan{
   border: 1px solid #E6DDDA;
   width: 230px;
   height: 100px;
   background-color: rgb(255,244,241);
}
#quan>span{
   font-size: xx-large;
   font-weight: 700;
}

#ulll>li{
   float: left;
   margin-right: 50px;
   margin-bottom: 60px;
   list-style: none;
}
#ul1{
 margin-top: 300px;
 padding: 0px;
 width: 1000px;
 height: 300px;
 border: 1px  #000;
}
#ul2{
 margin-bottom: 200px;
 width: 1150px;
 height: 60px;
 line-height: 60px;
 background-color: rgb(214, 214, 214);
 transform: translateY(-210px);
}
#li1{
 list-style-type: none;
 float: left;
}
#li3{
 list-style-type: none;
 float: left;
 margin-right: 200px;
 font-size: 18px;
}
#a1{
 border: 1px solid rgb(214, 214, 214);
 display: block;
 width: 200px;
 height: 60px;
 line-height: 50px;
 background-color: white;
 margin: 0px 0px;
 color: black;
 text-align: center;
 text-decoration: none;
 font-size: 20px; 
 font-weight: 700;
}
#a1:hover{
 background-color: rgb(51, 51, 51);
}
#mx{
 font-size: 20px;
 text-align: center;
 line-height: -50px;
 
}

.ropdown {
   position: relative;
   display: inline-block;
   background-color: rgb(255,244,241);
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: rgb(255,244,241);
   min-width: 140px;
   box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
   padding: 10px 27px;
}
.dropdown:hover .dropdown-content {
   display: block;
}

    </style>
    <script>
      // 侧方导航栏控制不同div显示
    function show2() {
        document.getElementById("box002").style.display = "block";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show3() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "block";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show4() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "block";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show5() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "block";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show6() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "block";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show7() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "block";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show8() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "block";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "none";
    };
    function show9() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "block";
        document.getElementById("box010").style.display = "none";
    };
    function show10() {
        document.getElementById("box002").style.display = "none";
        document.getElementById("box003").style.display = "none";
        document.getElementById("box004").style.display = "none";
        document.getElementById("box005").style.display = "none";
        document.getElementById("box006").style.display = "none";
        document.getElementById("box007").style.display = "none";
        document.getElementById("box008").style.display = "none";
        document.getElementById("box009").style.display = "none";
        document.getElementById("box010").style.display = "block";
    };
    function hiden2() { document.getElementById("box002").style.display = "none"; };
    function hiden3() { document.getElementById("box003").style.display = "none"; };
    function hiden4() { document.getElementById("box004").style.display = "none"; };
    function hiden5() { document.getElementById("box005").style.display = "none"; };
    function hiden6() { document.getElementById("box006").style.display = "none"; };
    function hiden7() { document.getElementById("box007").style.display = "none"; };
    function hiden8() { document.getElementById("box008").style.display = "none"; };
    function hiden9() { document.getElementById("box009").style.display = "none"; };
    function hiden10() { document.getElementById("box010").style.display = "none"; };
    </script>
</head>
<body>
  <!-- 顶部图片 -->
  <img src="./img/top1.png" style="width: 100%;">
  <!-- 黑色导航栏 -->
  <div class="nav_black">
      <div style="width: 80%; margin: 0 auto;">
          <div style="float: left; width: 30%;">
              <nav id="nav_list" class="nav">
                  <a class="nav-link" href="#">考拉欢迎你！</a>
                  <a class="nav-link" href="login.html">登录</a>
                  <a class="nav-link" href="#">免费注册</a>
                  <a class="nav-link" data-toggle="popover" data-placement="bottom" href="#">手机考拉</a>
              </nav>
          </div>
          <div style="float: right; width: 70%;">
              <ul id="nav_sec" class="nav justify-content-end">
                  <li class="nav-item">
                      <a class="nav-link active" href="#">每日签到</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">我的订单</a>
                  </li>
                  <li id="nav_sec" class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">个人中心</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="#">我的优惠券</a>
                          <a class="dropdown-item" href="#">我的红包</a>
                          <a class="dropdown-item" href="kaolabean.html">我的考拉豆</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">账号管理</a>
                          <a class="dropdown-item" href="#">我的实名认证</a>
                          <a class="dropdown-item" href="shoppingaddress.html">我的收货地址</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">我收藏的商品</a>
                          <a class="dropdown-item" href="#">我关注的品牌</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">售后管理</a>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">客户服务</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="#">联系客服</a>
                          <a class="dropdown-item" href="#">帮助中心</a>
                          <a class="dropdown-item" href="#">知识产权保护</a>
                          <a class="dropdown-item" href="#">规则中心</a>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">充值中心</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="#">话费充值</a>
                          <a class="dropdown-item" href="#">游戏充值</a>
                          <a class="dropdown-item" href="#">AppStore充值卡</a>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">消费者权益</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="consumer.html">消费者告知书</a>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">更多</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="#">收藏本站</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">新浪微博</a>
                          <a class="dropdown-item" href="#">微信公众号</a>
                          <a class="dropdown-item" href="#">招商合作</a>
                      </div>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">视频内容</a>
                  </li>
              </ul>
          </div>
      </div>
  </div>
  <!-- 网易考拉logo、搜索框、购物车按钮 -->
  <div id="top" class="component_thr" style="width: 100%; height: 100px;display: flex;">
      <!-- logo -->
      <div style="text-align: right; position: relative;right: 20px;">
          <img style="height: 100%;" src="./img/wykl_logo.png">
      </div>
      <!-- 搜索框 -->
      <div style="height: 100%;">
          <div id="search" class="input-group mb-3">
              <input type="text" class="form-control" placeholder="面膜" aria-label="面膜"
                  aria-describedby="button-addon2">
              <div class="input-group-append">
                  <button id="btn1" class="btn btn-outline-secondary" type="button" id="button-addon2"><img
                          style="height: 20px;" src="img/top_search.png"></button>
              </div>
          </div>
      </div>
      <!-- 购物车按钮 -->
      <div>
          <button id="btn2" onclick="window.location.href='car.html'"><img style="margin: 10px; height: 20px;"
                  src="img/shop_car1.png">购物车&nbsp;&nbsp;&nbsp;</button>
      </div>
  </div>
  <!-- 二级导航栏 -->
  <div style="margin-top:0px; border-bottom: 1px solid rgb(179, 179, 179);">
      <div style="width: 70%; margin: 0 auto; text-align: left;">
          <div class="dropdown">
              <a class="btn btn-secondary dropdown-toggle" id="dropdown_s" href="#" role="button"
                  id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                  style="position: relative; top: 1px;">
                  <img style="height: 22px; position: relative;bottom: 1px;right: 5px;" src="img/nav01.png">所有分类
              </a>
              <div id="dropdown_menu_sec" class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                  <a onMouseOver="show2()" onMouseOut="hiden2()" class="dropdown-item" href="#"><img class="act"
                          style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                          src="img/nav02.png">美容彩妆<img class="act"
                          style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                  <a onMouseOver="show3()" onMouseOut="hiden3()" class="dropdown-item" href="#"><img class="act"
                          style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                          src="img/nav03.png">母婴儿童<img class="act"
                          style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                  <a onMouseOver="show4()" onMouseOut="hiden4()" class="dropdown-item" href="#"><img class="act"
                          style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                          src="img/nav04.png">营养保健<img class="act"
                          style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                  <a onMouseOver="show5()" onMouseOut="hiden5()" class="dropdown-item" href="#"><img class="act"
                          style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                          src="img/nav05.png">数码家电<img class="act"
                          style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                  <a onMouseOver="show6()" onMouseOut="hiden6()" class="dropdown-item" href="#"><img class="act"
                          style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                          src="img/nav06.png">个护家清<img class="act"
                          style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                  <a onMouseOver="show7()" onMouseOut="hiden7()" class="dropdown-item" href="#"><img class="act"
                          style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                          src="img/nav07.png">服饰鞋靴<img class="act"
                          style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                  <a onMouseOver="show8()" onMouseOut="hiden8()" class="dropdown-item" href="#"><img class="act"
                          style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                          src="img/nav08.png">运动户外<img class="act"
                          style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                  <a onMouseOver="show9()" onMouseOut="hiden9()" class="dropdown-item" href="#"><img class="act"
                          style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                          src="img/nav09.png">手表配饰<img class="act"
                          style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
                  <a onMouseOver="show10()" onMouseOut="hiden10()" class="dropdown-item" href="#"><img class="act"
                          style="height: 22px; position: relative;bottom: 1px;right: 5px;"
                          src="img/nav10.png">环球美食<img class="act"
                          style="height: 15px; position: relative; bottom: 1px; left: 12px;" src="img/turn_r.png"></a>
              </div>
              <!-- 浮动盒子 -->
              <div class="box" id="box002" style="display: none;"><img style="height: 100%;" src="img/Snipaste_1.png">
              </div>
              <div class="box" id="box003" style="display: none;"><img style="height: 100%;" src="img/Snipaste_2.png">
              </div>
              <div class="box" id="box004" style="display: none;"><img style="height: 100%;" src="img/Snipaste_3.png">
              </div>
              <div class="box" id="box005" style="display: none;"><img style="height: 100%;" src="img/Snipaste_4.png">
              </div>
              <div class="box" id="box006" style="display: none;"><img style="height: 100%;" src="img/Snipaste_5.png">
              </div>
              <div class="box" id="box007" style="display: none;"><img style="height: 100%;" src="img/Snipaste_6.png">
              </div>
              <div class="box" id="box008" style="display: none;"><img style="height: 100%;" src="img/Snipaste_7.png">
              </div>
              <div class="box" id="box009" style="display: none;"><img style="height: 100%;" src="img/Snipaste_8.png">
              </div>
              <div class="box" id="box010" style="display: none;"><img style="height: 100%;" src="img/Snipaste_9.png">
              </div>
              <nav id="firstpage" class="nav" style="display: inline-block;">
                  <a class="nav-link" href="index.html">首页</a>
                  <a class="nav-link" href="overseas.html">海外直购</a>
                  <a class="nav-link" href="#">考拉海购出品</a>
                  <a class="nav-link" href="#">品牌奶粉</a>
                  <a class="nav-link" href="#">人气面膜</a>
                  <a class="nav-link" href="invest.html">充值</a>
              </nav>
          </div>
      </div>
  </div>
  <!-- 考拉豆 -->
  <div id="klb" style="text-align: left;">
<div id="top1"> 
  <p><h1>我的考拉豆</h1>
    <span><a href="#">如何赚取考拉豆</span></a></p>
</div>

<div id="head">
<p><img src="./img/img2.png" width="100px" height="100px" id="I1"> 
    <a href="#mx">考拉豆明细> </a> </p>
    <button type="button" style="color: white;" id="b1">签到领取</button>
    <p id="t1">今日签到可领取1考拉豆</p>
<p><img src="./img/img2.jpg" width="1000px" height="250px" id="I2" style="margin: -190px 200px;" ></p>
</div>
<div id="mid">
    <button id="b2" style="color: rgb(227,20,54);">考拉豆商城</button>
    <button id="b3">兑换记录</button>
</div>
<div id="mon">
    <h2>优惠券</h2>
    <ul id="ulll">
    <li><div class="dropdown" id="quan">
        <span style="color: rgb(227,20,54);">￥40</span>
        <p style="font-weight: 600;">考拉海购出品满200-40……</p>
        <div class="dropdown-content">
          <p>适用范围：考拉海购商品</p>
          <p>使用期限：获得后7天</p>
          <p>其他限制：无</p>
        </div>       
      </div>
    </li>
    <li><div class="dropdown" id="quan">
        <span style="color: rgb(227,20,54);">￥5</span>
        <p style="font-weight: 600;">碧诃诗+无门槛5元券</p>
        <div class="dropdown-content">
          <p>适用范围：碧诃诗旗舰店</p>
          <p>使用期限：获得后7天</p>
          <p>其他限制：无</p>
        </div>       
      </div>
    </li>
    <li><div class="dropdown" id="quan">
        <span style="color: rgb(227,20,54);">￥12</span>
        <p style="font-weight: 600;">每满100减12</p>
        <div class="dropdown-content">
          <p>适用范围：爱可乐旗舰店</p>
          <p>使用期限：获得后8天</p>
          <p>其他限制：无</p>
        </div>       
      </div>
    </li>
    <li><div class="dropdown" id="quan">
        <span style="color: rgb(227,20,54);">￥15</span>
        <p style="font-weight: 600;">无门槛减15</p>
        <div class="dropdown-content">
          <p>适用范围：考拉海购商品</p>
          <p>使用期限：获得后7天</p>
          <p>其他限制：无</p>
        </div>       
      </div>
    </li>
    <li><div class="dropdown" id="quan">
        <span style="color: rgb(227,20,54);">￥5</span>
        <p style="font-weight: 600;">无门槛减5</p>
        <div class="dropdown-content">
          <p>适用范围：考拉海购商品</p>
          <p>使用期限：2021.7.1</p>
          <p>其他限制：无</p>
        </div>       
      </div>
    </li>
    </ul>
    <ul id="ulll">
        <li><div class="dropdown" id="quan">
            <span style="color: rgb(227,20,54);">￥40</span>
            <p style="font-weight: 600;">考拉海购出品满200-40……</p>
            <div class="dropdown-content">
              <p>适用范围：考拉海购商品</p>
              <p>使用期限：获得后七天</p>
              <p>其他限制：无</p>
            </div>       
          </div>
        </li>
        <li><div class="dropdown" id="quan">
            <span style="color: rgb(227,20,54);">￥40</span>
            <p style="font-weight: 600;">考拉海购出品满200-40</p>
            <div class="dropdown-content">
              <p>适用范围：考拉海购商品</p>
              <p>使用期限：获得后七天</p>
              <p>其他限制：无</p>
            </div>       
          </div>
        </li>
        <li><div class="dropdown" id="quan">
            <span style="color: rgb(227,20,54);">￥40</span>
            <p style="font-weight: 600;">考拉海购出品满200-40</p>
            <div class="dropdown-content">
              <p>适用范围：考拉海购商品</p>
              <p>使用期限：获得后七天</p>
              <p>其他限制：无</p>
            </div>       
          </div>
        </li>
        </ul>
</div>
<div id="foot">
    <ul id="ul1">
        <li id="li1"><a href="#mx" id="a1">考拉豆明细</a></li>
        <li id="li1"><a href="" id="a1">收入</a></li>
        <li id="li1"><a href="" id="a1">支出</a></li>
        <li id="li1"><a href="" id="a1">过期</a></li>
      
    </ul>
    
      <ul id="ul2">
        <li id="li3">日期</li>
        <li id="li3">收入/支出</li>
        <li id="li3">详细信息</li>
    
      </ul>
      <p id="mx">暂无记录</p>
    </div>

</div>
</body>
</html>